<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<!-- include jQuery + carouFredSel plugin -->
<script type="text/javascript" language="javascript"
	src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/carousel/jquery.carouFredSel-6.1.0-packed.js"></script>
<link href="css/carousel/carouFredSel.css" rel="stylesheet"
	type="text/css" />

<script type='text/javascript'
	src='js/menu/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/menu/jquery.dcmegamenu.1.3.3.js'></script>
<link href="css/menu/black.css" rel="stylesheet" type="text/css" />
<link href="css/menu/dcmegamenu.css" rel="stylesheet" type="text/css" />
<link href="css/css.css" rel="stylesheet" type="text/css" />

<script>
	$(function() {

		$('#foo2').carouFredSel({
			circular : false,
			infinite : false,
			auto : false,
			prev : {
				button : '#foo2_prev',
				key : 'left'
			},
			next : {
				button : '#foo2_next',
				key : 'right'
			},
			pagination : '#foo2_pag'
		});

		$('#foo').carouFredSel({
			circular : false,
			infinite : false,
			auto : false,
			prev : {
				button : '#foo_prev',
				key : 'left'
			},
			next : {
				button : '#foo_next',
				key : 'right'
			},
			pagination : '#foo_pag'
		});
	});

	$(document).ready(function($) {
		/*$('#mega-menu').dcMegaMenu({
			rowItems : '5',
			speed : 'fast',
			effect : 'slide'
		});*/
		$('#mega-menu').dcMegaMenu({
			rowItems : '5',
			speed : 'fast',
			effect : 'slide'
		});
	});
	
	
	function createMenu(menuData){
		var _ul = document.createElement('ul');
		var _li = document.createElement('li');
		var _a = document.createElement('a');
		var l = menuData.length;
		for(var i =0; i< l;i++){
			var obj = menuData[i];
			_li = document.createElement('li');
			_a = document.createElement('a');
			
			_a.appendChild(document.createTextNode(obj.title));
			_a.setAttribute('href', obj.link);
			_li.appendChild(_a);
			if(obj.class != undefined){
				_a.setAttribute('class', obj.class);
			}
			if(obj.child != undefined){
				_li.appendChild(createMenu(obj.child));
			}
			_ul.appendChild(_li);
		}	
		return _ul;
	}
</script>


<style>
</style>
</head>
<body>
	<header style="height: 100px;"> </header>


	<div id="menu" class="black">
	
		<!-- <ul id="mega-menu" class="mega-menu">
			<li><a href="home.html"> home</a></li>
			<li><a href="test.html">Products</a>
				<ul>
					<li>
						<a href="#">Mobile Phones</a>
						<ul>
							<li><a href="#">Product 1</a></li>
							<li><a href="#">Product 2</a></li>
							<li><a href="#">Product 3</a></li>
							<li><a href="#" class="add_new">  </a></li>
						</ul>
					</li>
					<li>
						<a href="#">Desktop</a>
						<ul>
							<li><a href="#">Product 4</a></li>
							<li><a href="#">Product 5</a></li>
							<li><a href="#">Product 6</a></li>
							<li><a href="#">Product 7</a></li>
							<li><a href="#">Product 8</a></li>
							<li><a href="#">Product 9</a></li>
							<li><a href="#" class="add_new"> + Add New </a></li>
						</ul>
					</li>
					<li><a href="#">Laptop</a>
						<ul>
							<li><a href="#">Product 10</a></li>
							<li><a href="#">Product 11</a></li>
							<li><a href="#">Product 12</a></li>
							<li><a href="#">Product 13</a></li>
							<li><a href="#" class="add_new"> + Add New </a></li>
						</ul></li>
					<li><a href="#">Accessories</a>
						<ul>
							<li><a href="#">Product 14</a></li>
							<li><a href="#">Product 15</a></li>
							<li><a href="#" class="add_new"> + Add New </a></li>
						</ul></li>
					<li><a href="#">Software</a>
						<ul>
							<li><a href="#">Product 16</a></li>
							<li><a href="#">Product 17</a></li>
							<li><a href="#">Product 18</a></li>
							<li><a href="#">Product 19</a></li>
							<li><a href="#" class="add_new"> + Add New </a></li>
						</ul></li>
					<li><a href="#" class="add_new"> + Add New </a>
						<ul>
							<li><a href="#">...</a></li>
							<li><a href="#">...</a></li>
							<li><a href="#">...</a></li>
							<li><a href="#">...</a></li>
						</ul></li>
				</ul></li>
			<li><a href="#">Sale</a>
				<ul>
					<li><a href="#">Special Offers</a>
						<ul>
							<li><a href="#">Offer 1</a></li>
							<li><a href="#">Offer 2</a></li>
							<li><a href="#">Offer 3</a></li>
						</ul></li>
					<li><a href="#">Reduced Price</a>
						<ul>
							<li><a href="#">Offer 4</a></li>
							<li><a href="#">Offer 5</a></li>
							<li><a href="#">Offer 6</a></li>
							<li><a href="#">Offer 7</a></li>
						</ul></li>
					<li><a href="#">Clearance Items</a>
						<ul>
							<li><a href="#">Offer 9</a></li>

						</ul></li>
					<li class="menu-item-129"><a href="#">Ex-Stock</a>
						<ul>
							<li><a href="#">Offer 10</a></li>
							<li><a href="#">Offer 11</a></li>
							<li><a href="#">Offer 12</a></li>
							<li><a href="#">Offer 13</a></li>
						</ul></li>
				</ul></li>
			<li><a href="#">About Us</a>
				<ul>
					<li><a href="#">About Page 1</a></li>
					<li><a href="#">About Page 2</a></li>

				</ul></li>
			<li><a href="#">Services</a>
				<ul>
					<li><a href="#">Service 1</a>
						<ul>
							<li><a href="#">Service Detail A</a></li>
							<li><a href="#">Service Detail B</a></li>
						</ul></li>
					<li><a href="#">Service 2</a>
						<ul>
							<li><a href="#">Service Detail C</a></li>
						</ul></li>
					<li><a href="#">Service 3</a>
						<ul>
							<li><a href="#">Service Detail D</a></li>
							<li><a href="#">Service Detail E</a></li>
							<li><a href="#">Service Detail F</a></li>
						</ul></li>
					<li><a href="#">Service 4</a></li>
				</ul></li>
			<li><a href="#">Contact us</a></li>
		</ul>-->
	</div>

<script>
		var menuData = [{'title':'hone','link':'home.html'},
		                {'title':'product','link':'','child':
		                	[
		                	 {'title':'Product1','link':'','child':[{'title':'Product11','link':'gallery.html'},{'title':'Product12','link':'gallery.html'},{'title':'Product13','link':'gallery.html'},{'title':'Product14','link':'gallery.html'},{'title':'+ Add New Item','link':'add_gallery_item.html'}]},
		                	 {'title':'Product2','link':'','child':[{'title':'Product21','link':'gallery.html'},{'title':'Product22','link':'gallery.html'},{'title':'Product23','link':'gallery.html'}]},
		                	 {'title':'Product3','link':'','child':[{'title':'Product31','link':'gallery.html'},{'title':'Product32','link':'gallery.html'},{'title':'Product33','link':'gallery.html'},{'title':'Product34','link':'gallery.html'},{'title':'Product35','link':'gallery.html'},{'title':'Product36','link':'gallery.html'}]},
		                	 {'title':'Product4','link':'','child':[{'title':'Product41','link':'gallery.html'},{'title':'Product42','link':'gallery.html'}]},
		                	 {'title':'Product5','link':'','child':[{'title':'Product51','link':'gallery.html'},{'title':'Product52','link':'gallery.html'}]},
		                	 {'title':'Product6','link':'','child':[{'title':'Product61','link':'gallery.html'},{'title':'Product62','link':'gallery.html'},{'title':'Product63','link':'gallery.html'}]},
		                	 {'title':'Add New ','link':'','child':[{'title':'--','link':''},{'title':'--','link':''}]}
		                	]
						},
		                {'title':'Sale','link':'sale.html'},
		                {'title':'About Us','link':'sale.html'},
		                {'title':'Contact Us','link':'','child':[{'title':'Address','link':''},{'title':'Send Email','link':''}]}]; 
		var _ul=createMenu(menuData);
		_ul.setAttribute('class', 'mega-menu');
		_ul.setAttribute('id', 'mega-menu');
	document.getElementById('menu').appendChild(_ul);
	</script>

	<div id="_body">







		<section class="image_carousel">
			<div class="pagination1">dfsdfg</div>
			<div id="foo2" class='foo'>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg"
						alt="basketball" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>

				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg"
						alt="beachtree" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg"
						alt="cupcackes" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg"
						alt="hangmat" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg"
						alt="new york" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg"
						alt="laundry" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg"
						alt="mom son" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg"
						alt="picknick" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
			</div>
			<div class="clearfix"></div>
			<a class="prev" id="foo2_prev" href="#"><span>prev</span></a> <a
				class="next" id="foo2_next" href="#"><span>next</span></a>
			<div class="pagination" id="foo2_pag"></div>
		</section>


		<section class="image_carousel">
			<div class="pagination1">dfsdfg</div>
			<div id="foo" class='foo'>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg"
						alt="basketball" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>

				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg"
						alt="beachtree" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg"
						alt="cupcackes" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg"
						alt="hangmat" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg"
						alt="new york" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg"
						alt="laundry" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg"
						alt="mom son" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg"
						alt="picknick" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" width="180" height="140" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
			</div>
			<div class="clearfix"></div>
			<a class="prev" id="foo_prev" href="#"><span>prev</span></a> <a
				class="next" id="foo_next" href="#"><span>next</span></a>
			<div class="pagination" id="foo_pag"></div>
		</section>


	</div>
	<footer style="height: 100px"> </footer>
</body>
</html>

